<template>
  <div class="chart" ref="chartDom"></div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { ECBasicOption } from "echarts/types/dist/shared";
import { onMounted, ref, watch } from "vue";
import Echarts from "../modules/echarts";
import { useGlobalStore } from "../modules/pinia";
interface myChartDt {
  instances: Echarts.ECharts | null;
  option: ECBasicOption;
  width: number;
  height: number;
}
const chartDom = ref<HTMLElement | null>(null);
const globalStore = useGlobalStore();
const myChart: myChartDt = reactive({
  instances: null,
  option: {
    title: {
      text: "📕 季度进度",
      left: 10,
      top: 10,
    },
    series: [
      {
        center: ["20%", "50%"],
        type: "gauge",
        startAngle: 90,
        endAngle: -270,
        radius: "55%",
        progress: {
          show: true,
          roundCap: true,
        },
        pointer: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        detail: {
          fontSize: 12,
          color: "inherit",
          valueAnimation: true,
          offsetCenter: ["0", "50%"],
          formatter: "{value}%",
        },
      },
      {
        center: ["40%", "50%"],
        type: "gauge",
        startAngle: 90,
        endAngle: -270,
        radius: "55%",
        progress: {
          show: true,
          roundCap: true,
        },
        pointer: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        detail: {
          fontSize: 12,
          color: "inherit",
          valueAnimation: true,
          offsetCenter: ["0", "50%"],
          formatter: "{value}%",
        },
      },
      {
        center: ["60%", "50%"],
        type: "gauge",
        startAngle: 90,
        endAngle: -270,
        radius: "55%",
        progress: {
          show: true,
          roundCap: true,
        },
        pointer: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        detail: {
          fontSize: 12,
          color: "inherit",
          valueAnimation: true,
          offsetCenter: ["0", "50%"],
          formatter: "{value}%",
        },
      },
      {
        center: ["80%", "50%"],
        type: "gauge",
        startAngle: 90,
        endAngle: -270,
        radius: "55%",
        progress: {
          show: true,
          roundCap: true,
        },
        pointer: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        detail: {
          fontSize: 12,
          color: "inherit",
          valueAnimation: true,
          offsetCenter: ["0", "50%"],
          formatter: "{value}%",
        },
      },
    ],
  },
  width: 0,
  height: 0,
});
const gaugeData1 = [
  {
    value: 10,
    name: "2022\n第一季度",
    title: {
      offsetCenter: ["0", "0"],
      lineHeight: 20,
    },
  },
];
const gaugeData2 = [
  {
    value: 20,
    name: "2022\n第二季度",
    title: {
      offsetCenter: ["0", "0"],
      lineHeight: 20,
    },
  },
];
const gaugeData3 = [
  {
    value: 30,
    name: "2022\n第三季度",
    title: {
      offsetCenter: ["0", "0"],
      lineHeight: 20,
    },
  },
];
const gaugeData4 = [
  {
    value: 40,
    name: "2022\n第四季度",
    title: {
      offsetCenter: ["0", "0"],
      lineHeight: 20,
    },
  },
];
let timer: NodeJS.Timeout | number | undefined;

watch(
  [
    () => globalStore.isReady,
    () => globalStore.theme,
    () => myChart.width,
    () => myChart.height,
  ],
  () => {
    initChart();
    updateChart();
    const observer = new ResizeObserver(resizeChart);
    observer.observe(chartDom.value as HTMLElement);
  }
);

onMounted(() => {
  window.addEventListener("resize", resizeChart);
  initChart();
});

function initChart() {
  if (myChart.instances) myChart.instances!.dispose();
  myChart.instances = Echarts.init(
    chartDom.value as HTMLElement,
    globalStore.theme
  );
}

function updateChart() {
  const { instances, option } = myChart;
  instances!.setOption(option);

  randomData();
  if (timer) {
    clearInterval(timer);
    timer = undefined;
  }
  timer = setInterval(randomData, 5000);
}

function resizeChart() {
  myChart.instances!.resize();
}

function randomData() {
  gaugeData1[0].value = +(Math.random() * 100).toFixed(2);
  gaugeData2[0].value = +(Math.random() * 100).toFixed(2);
  gaugeData3[0].value = +(Math.random() * 100).toFixed(2);
  gaugeData4[0].value = +(Math.random() * 100).toFixed(2);
  myChart.instances!.setOption({
    series: [
      {
        data: gaugeData1,
      },
      {
        data: gaugeData2,
      },
      {
        data: gaugeData3,
      },
      {
        data: gaugeData4,
      },
    ],
  });
}
</script>

<style scoped></style>
